<script setup lang="ts">
import { onMounted, onUnmounted } from '@vue/runtime-core'
import BoardVue from './Board.vue'
import BranchVue from './Branch.vue'
import TitleListVue from './TitleList.vue'

let dragingSpliterDom: HTMLElement | null
let getContainer = () => {
  let domRight = document.querySelector('.right') as HTMLElement
  let domLeft = document.querySelector('.left') as HTMLElement
  let domCenter = document.querySelector('.center') as HTMLElement
  return { domLeft, domRight, domCenter }
}
let getSpliter = () => {
  let domSpliterLeft = document.querySelector('#spliterLeft') as HTMLElement
  let domSpliterRight = document.querySelector('#spliterRight') as HTMLElement
  return { domSpliterLeft, domSpliterRight }
}
let resizer = () => {
  let containerDom = getContainer()
  if (containerDom.domRight.clientWidth > 60) {
    containerDom.domRight.setAttribute('style', `width:${window.innerWidth - containerDom.domLeft.clientWidth - containerDom.domCenter.clientWidth}px`)
    return
  } else if (containerDom.domCenter.clientWidth > 60) {
    containerDom.domCenter.setAttribute('style', `width:${window.innerWidth - containerDom.domLeft.clientWidth - containerDom.domRight.clientWidth}px`)
    return
  } else {
    containerDom.domLeft.setAttribute('style', `width:${window.innerWidth - containerDom.domRight.clientWidth - containerDom.domCenter.clientWidth}px`)
    return
  }
}
let loader = () => {
  let containerDom = getContainer()
  let spliterDom = getSpliter()
  containerDom.domLeft.setAttribute('style', `width:200px`)
  spliterDom.domSpliterLeft.setAttribute('style', `left:197px`)
  let halfWidth = (window.innerWidth - 200) / 2
  containerDom.domCenter.setAttribute('style', `width:${halfWidth}px`)
  spliterDom.domSpliterRight.setAttribute('style', `left:${200 + halfWidth - 3}px`)
  containerDom.domRight.setAttribute('style', `width:${halfWidth}px`)
}
let spliterMouseMove = (e: MouseEvent) => {
  if (dragingSpliterDom?.getAttribute('id') == 'spliterRight') {
    let domLeftWidth = dragingSpliterDom?.parentElement?.firstElementChild?.clientWidth ?? 0
    let domCenterWidth = e.clientX - domLeftWidth
    if (e.clientX > window.innerWidth - 60 || domCenterWidth < 60) return
    dragingSpliterDom?.previousElementSibling?.setAttribute('style', `width:${domCenterWidth}px;`)
    dragingSpliterDom?.nextElementSibling?.setAttribute('style', `width:${window.innerWidth - e.clientX}px;`)
    dragingSpliterDom?.setAttribute('style', `left:${e.clientX - 3}px;`)
  } else {
    let domRightWidth = dragingSpliterDom?.parentElement?.lastElementChild?.clientWidth ?? 0
    let domCenterWidth = window.innerWidth - domRightWidth - e.clientX
    if (e.clientX < 60 || domCenterWidth < 60) return
    dragingSpliterDom?.previousElementSibling?.setAttribute('style', `width:${e.clientX}px;`)
    dragingSpliterDom?.nextElementSibling?.setAttribute('style', `width:${domCenterWidth}px;`)
    dragingSpliterDom?.setAttribute('style', `left:${e.clientX - 3}px;`)
  }
}
let spliterMouseUp = () => {
  document.removeEventListener('mousemove', spliterMouseMove)
  document.removeEventListener('mouseup', spliterMouseUp)
  dragingSpliterDom = null
  console.log('clean mouse event')
}
let spliterMouseDown = (e: MouseEvent) => {
  dragingSpliterDom = e.target as HTMLElement
  document.addEventListener('mousemove', spliterMouseMove)
  document.addEventListener('mouseup', spliterMouseUp)
}
onMounted(() => {
  window.addEventListener('resize', resizer)
  loader()
})
onUnmounted(() => {
  window.removeEventListener('resize', resizer)
})
</script>

<template>
  <div class="body">
    <div class="left" style="width: 200px">
      <TitleListVue />
    </div>
    <div @mousedown="spliterMouseDown" id="spliterLeft" class="spliter" style="left: 197px"></div>
    <div class="center">
      <!-- <BranchVue /> -->
    </div>
    <div @mousedown="spliterMouseDown" id="spliterRight" class="spliter"></div>
    <div class="right">
      <!-- <BoardVue /> -->
    </div>
  </div>
</template>
<style scoped>
.body {
  position: absolute;
  top: 38px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  display: flex;
}
.left {
  width: 200px;
  background: rgb(243, 243, 243);
  height: 100%;
}
.center {
  height: 100%;
  width: 300px;
  position: relative;
}
.right {
  flex: 1;
  height: 100%;
}
.spliter {
  position: absolute;
  width: 6px;
  z-index: 2;
  height: 100%;
}
.spliter:hover {
  background: rgb(226, 226, 226);
  cursor: ew-resize;
}
</style>
